<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<head>
 <meta charset="utf-8"/>
    <title>评分</title>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>

    <link href="css/star-rating.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="js/star-rating.js" type="text/javascript"></script>
</head>
<style>
	body {
		font-size: 12px;
		font-family: Arial;
		margin: 0px;
		padding: 0px;
	}
	
	a {
		color: #999;
	}
	
	.greenColor {
		color: darkgreen !important;
	}
	
	nav.top a:hover {
		color: darkgreen;
		text-decoration: none;
	}
	
	nav.top {
		background-color: ghostwhite;
		padding-top: 5px;
		padding-bottom: 5px;
		border-bottom: 1px solid #e7e7e7;
		margin: 0px;
	}
	
	nav.top span,
	nav.top a {
		color: #999;
		margin: 0px 0px 0px 10px;
		text-decoration: none;
	}
	
	.pull-right {
		float: right;
	}
	
	div.searchDiv {
		background-color: cadetblue;
		width: 400px;
		margin: 0px auto;
		padding: 1px;
		height: 40px;
		display: block;
	}
	
	div.searchDiv input {
		width: 275px;
		border: 1px solid transparent;
		height: 36px;
		margin: 1px;
		outline: none;
	}
	
	div.searchDiv button {
		width: 110px;
		border: 1px solid transparent;
		background-color: cadetblue;
		color: white;
		font-size: 20px;
		font-weight: bold;
	}
	
	div.searchBelow {
		margin-top: 3px;
		margin-left: -20px;
	}
	
	div.searchBelow span {
		color: #999;
	}
	
	div.searchBelow a {
		padding: 0px 20px 0px 20px;
		font-size: 14px;
		text-decoration: none;
	}
	
	img.logo {
		position: absolute;
		left: 0px;
		top: 30px;
		z-index: -1;
	}
	
	body {
		font-size: 12px;
		font-family: Arial;
	}
	
	a {
		color: #999;
	}
	
	a:hover {
		text-decoration: none;
		color: cadetblue;
	}
	
	* {
		margin: 0;
		padding: 0;
	}
	
	.centerblock {
		top: 100px;
		margin: auto;
		margin-top: 50px;
		width: 935px;
		height: 300px;
		border: 1px solid silver;
	}
	
	.centerblock2 {
		top: 100px;
		margin: auto;
		margin-top: 50px;
		width: 935px;
		height: 10px;
	}
	
	.centerblock_left {
		width: 199px;
		height: 300px;
		border-right: 1px solid cadetblue;
		float: left;
	}
	
	#centerblock_right {
		float: left;
		width: 735px;
		height: 300px;
		overflow: hidden;
		position: relative;
	}
	
	#list {
		width: 4200px;
		height: 300px;
		position: absolute;
		z-index: 1;
	}
	
	#list img {
		width: auto;
		height: 100%;
	}
	
	.listmenu {
		/*border: 1px solid silver;*/
		/*left: 20px;*/
	}
	
	.listmenu li {
		list-style: none;
		padding-left: 20px;
		height: 31.2px;
		line-height: 31.2px;
		font-size: 15px;
	}
	
	.listmenu li span {
		float: right;
		margin-right: 10px;
	}
	
	.listmenu li>a {
		text-decoration: none;
		color: #3a3a3a;
	}
	
	.listmenu li:hover {
		background-color: whitesmoke;
		color: cadetblue;
	}
	
	.listmenu li:hover>a {
		color: cadetblue;
	}
	
	.listmenu>li>a:hover {
		text-decoration: underline;
	}
	
	.listmenu_child1 {
		position: absolute;
		left: 220px;
		top: 0px;
		background-color: white;
		border: 2px solid cadetblue;
		width: 500px;
		height: 200px;
		display: none;
		z-index: 9999;
	}
	
	.listmenu_child2 {
		position: absolute;
		left: 220px;
		top: 30px;
		background-color: white;
		border: 2px solid cadetblue;
		width: 500px;
		height: 200px;
		display: none;
		z-index: 9999;
	}
	
	.listmenu_child3 {
		position: absolute;
		left: 220px;
		top: 60px;
		background-color: white;
		border: 2px solid cadetblue;
		width: 500px;
		height: 200px;
		display: none;
		z-index: 9999;
	}
	
	.listmenu_child4 {
		position: absolute;
		left: 220px;
		top: 90px;
		background-color: white;
		border: 2px solid cadetblue;
		width: 500px;
		height: 200px;
		display: none;
		z-index: 9999;
	}
	
	.listmenu_child5 {
		position: absolute;
		left: 220px;
		top: 120px;
		background-color: white;
		border: 2px solid cadetblue;
		width: 500px;
		height: 200px;
		display: none;
		z-index: 9999;
	}
	
	.listmenu_child6 {
		position: absolute;
		left: 220px;
		top: 150px;
		background-color: white;
		border: 2px solid cadetblue;
		width: 500px;
		height: 200px;
		display: none;
		z-index: 9999;
	}
	
	.listmenu_child7 {
		position: absolute;
		left: 220px;
		top: 180px;
		background-color: white;
		border: 2px solid cadetblue;
		width: 500px;
		height: 200px;
		display: none;
		z-index: 9999;
	}
	
	.listmenu>li:hover .listmenu_child1 {
		display: block;
	}
	
	.listmenu>li:hover .listmenu_child2 {
		display: block;
	}
	
	.listmenu>li:hover .listmenu_child3 {
		display: block;
	}
	
	.listmenu>li:hover .listmenu_child4 {
		display: block;
	}
	
	.listmenu>li:hover .listmenu_child5 {
		display: block;
	}
	
	.listmenu>li:hover .listmenu_child6 {
		display: block;
	}
	
	.listmenu>li:hover .listmenu_child7 {
		display: block;
	}
	
	.listmenu_child_left {
		position: relative;
		float: left;
		padding-left: 20px;
		width: 530px;
		height: 300px;
	}
	
	.listmenu_child_right {
		position: relative;
		float: left;
		width: 249px;
		height: 300px;
		border-left: 1px solid silver;
	}
	
	.listmenu_child_left_top_title {
		position: relative;
		width: 530px;
		height: 35px;
		line-height: 35px;
		margin-top: 5px;
		color: black;
	}
	
	.span1 {
		position: absolute;
		bottom: 0;
		float: left;
		font-size: 18px;
		left: 0px;
		color: black;
	}
	
	.span2 {
		position: absolute;
		bottom: 0;
		float: right;
		font-size: 13px;
		right: 8px;
		color: black;
	}
	
	.listmenu_child_left_a {
		margin-right: 25px;
		line-height: 25px;
	}
	
	.listmenu_child_left_a>a {
		text-decoration: none;
		font-size: 14px;
		margin-right: 20px;
	}
	
	.colororg {
		color: cadetblue;
	}
	
	.colorgray {
		color: gray;
	}
	
	.listmenu_child_right_title {
		position: relative;
		text-align: center;
		font-size: 14px;
		color: black;
		top: 10px;
	}
	
	#buttons {
		position: absolute;
		height: 10px;
		width: 100px;
		z-index: 2;
		/*将buttons放在list上层*/
		bottom: 20px;
		right: 250px;
	}
	
	#buttons span {
		cursor: pointer;
		float: left;
		border: 1px solid #fff;
		border-radius: 50%;
		height: 10px;
		width: 10px;
		margin-right: 5px;
		background: #E98352;
	}
	
	#buttons .on {
		background: #474550;
	}
	
	.arrow {
		display: none;
		cursor: pointer;
		line-height: 40px;
		text-align: center;
		font-size: 30px;
		/*设置箭头的大小*/
		width: 40px;
		height: 40px;
		position: absolute;
		z-index: 2;
		/*将arrow放在list上层*/
		top: 180px;
		color: #fff;
		background: #474550;
	}
	
	.arrow:hover {
		background-color: #E98352;
		text-decoration: none;
	}
	
	#centerblock_right:hover .arrow {
		display: block;
		text-decoration: none;
	}
	
	#pre {
		left: 20px;
	}
	
	#next {
		right: 20px;
	}
	
	.oneSpan {
		padding: 10px 0;
	}
	
	.author {
		padding: 0 20px;
		height: 24px;
		line-height: 24px;
		overflow: hidden;
		color: #aaa;
	}
	
	.price {
		padding-left: 20px;
		height: 36px;
		line-height: 16px;
		font-family: "Arial";
		font-size: 14px;
		position: relative;
	}
	
	.rob {
		color: #c30;
		float: left;
		overflow: hidden;
		margin-right: 12px;
		font-weight: bold;
	}
	
	.name {
		height: 44px;
		line-height: 22px;
		position: absolute;
		overflow: hidden;
		top: 9px;
		left: 145px;
	}
	
	.product_ul {
		width: 800px;
		padding-top: 25px;
	}
	
	.div-inline {
		display: inline;
		width: 180px;
		height: 300px;
	}
	
	div.imgAndInfo {
		margin: 40px 20px;
	}
	
	div.imgInimgAndInfo {
		width: 400px;
		float: left;
	}
	
	div.imgAndInfo img.bigImg {
		width: 400px;
		height: 400px;
		padding: 20px;
		border: 1px solid #F2F2F2;
	}
	
	div.imgAndInfo div.smallImageDiv {
		width: 80%;
		margin: 20px auto;
	}
	
	div.imgAndInfo img.smallImage {
		width: 60px;
		height: 60px;
		border: 2px solid white;
	}
	
	div.imgAndInfo img.smallImage:hover {
		border: 2px solid black;
	}
	
	div.infoInimgAndInfo {
		padding: 0px 20px;
		overflow: hidden;
	}
	
	div.infoInimgAndInfo div.productTitle {
		color: black;
		font-size: 16px;
		font-weight: bold;
		margin: 0px 10px;
	}
	
	div.infoInimgAndInfo div.productSubTitle {
		color: gray;
		font-size: 16px;
		margin: 0px 10px;
	}
	
	div.infoInimgAndInfo div.productSubTitle2 {
		color: cadetblue;
		font-size: 12px;
		margin: 10px 10px;
	}
	
	div.infoInimgAndInfo div.juhuasuan {
		background-color: #2DA77A;
		color: white;
		text-align: center;
		line-height: 40px;
		margin-top: 10px;
	}
	
	div.infoInimgAndInfo span.juhuasuanBig {
		font-size: 18px;
		font-weight: bold;
		font-family: 黑体;
	}
	
	div.infoInimgAndInfo span.juhuasuanTime {
		color: #FFC057;
		font-weight: bold;
	}
	
	div.infoInimgAndInfo div.productPriceDiv {

		height: 50px;
		padding: 10px;
		color: #666666;
	}
	
	div.infoInimgAndInfo div.gouwujuanDiv {
		margin-top: 5px;
	}
	
	div.infoInimgAndInfo div.originalDiv {
		margin-top: 5px;
	}
	
	div.infoInimgAndInfo span.originalPriceDesc {
		font-size: 20px;
		color: cadetblue;
		display: inline-block;
		width: 68px;
	}
	
	div.infoInimgAndInfo span.originalPrice {
		font-family: Arial;
		font-size: 14px;
		color: #333333;
	}
	
	div.infoInimgAndInfo span.promotionPriceYuan {
		font-family: Arial;
		font-size: 18px;
		color: #C40000;
	}
	
	div.infoInimgAndInfo span.promotionPrice {
		color: #c40000;
		font-family: Arial;
		font-size: 30px;
		font-weight: bold;
	}
	
	div.infoInimgAndInfo span.promotionPriceDesc {
		color: #999999;
		display: inline-block;
		width: 68px;
		position: relative;
		left: 0px;
		top: -10px;
	}
	
	div.infoInimgAndInfo div.productNumber {
		color: #999999;
	}
	
	div.infoInimgAndInfo span.productNumberSettingSpan {
		border: 1px solid #999;
		display: inline-block;
		width: 43px;
		height: 32px;
		padding-top: 7px;
	}
	
	div.infoInimgAndInfo input.productNumberSetting {
		border: 0px;
		height: 80%;
		width: 80%;
	}
	
	div.productNumber span.num_add {
		background-position: -37px 0;
		top: 0;
	}
	
	div.productNumber span.updown {
		border: 1px solid #999;
		display: block;
		width: 20px;
		height: 14px;
		text-align: center;
		padding-top: 4px;
	}
	
	div.productNumber span.updownMiddle {
		height: 4px;
		display: block;
	}
	
	div.productNumber span.arrow {
		display: inline-block;
		width: 22px;
		height: 32px;
		vertical-align: top;
	}
	
	div.buyDiv {
		margin: 20px auto;
		text-align: center;
	}
	
	div.buyDiv button {
		display: inline-block;
		margin: 0px 10px;
		width: 180px;
		height: 40px;
	}
	
	button.buyButton {
		border: 1px solid whitesmoke;
		background-color: whitesmoke;
		text-align: center;
		line-height: 40px;
		font-size: 16px;
		color: cadetblue;
		font-family: arial;
	}
	
	button.addCartButton {
		border: 1px solid cadetblue;
		background-color: cadetblue;
		text-align: center;
		line-height: 40px;
		font-size: 16px;
		color: white;
		font-family: arial;
	}
	
	button.addCartButton span.glyphicon {
		font-size: 12px;
		margin-right: 8px;
	}
	
	a:hover {
		cursor:hand;
		text-decoration: none;
	}
	button:hover {
		cursor:hand;
	}
	.redColor {
		color: #C40000;
	}
	
	.boldWord {
		font-weight: bold;
	}
	
	div .messbox_info {
		display: inline-block;
		padding-right: 25px
	}
	
	div .messbox_info .title {
		display: inline-block
	}
	
	.product_main .sale_box .messbox_info .pinglun {
		clear: both
	}
	
	.product_main .sale_box .messbox_info .pinglun .t1 {
		float: left
	}
</style>
<% int bookId=Integer.parseInt(request.getParameter("id")); %>
<script type="text/javascript">
    	 window.onload=function(){
        	 xmlhttp = new XMLHttpRequest();
        	 xmlhttp.onreadystatechange = function(){
        			if(xmlhttp.readyState==4) {
        		  	    if(xmlhttp.status==200) {
        				      var respTxt = xmlhttp.responseText;
        				      window.eval("var arr="+respTxt);
        				      var html='<div class="imgInimgAndInfo"><img width="100px" class="bigImg" src="<%=request.getContextPath()%>/img/'+arr[0].book_id+'.jpg"/></div><div class="infoInimgAndInfo">';
        				      html += '<div class="productTitle">'+arr[0].title+'</div>';
        				      if(arr[0].description!="null"){
        				    	  html += '<div class="productSubTitle">'+arr[0].description+'</div>';
        				      }
        				      if(arr[0].author=="null")arr[0].author="";
        				      html += '<div class="productSubTitle2">'+'<span>作者:<a>'+arr[0].author+'</a></span>&nbsp;出版社:<a>'+arr[0].publisher+'</a>&nbsp;出版时间:<a>'+arr[0].publishing_time+'</a></div>';
        				      html += '<div class="productPrice"><div class="productPriceDiv"><div class="originalDiv"><span class="originalPriceDesc">价格</span><span class="originalPriceYuan">¥</span><span class="originalPrice">'+arr[0].book_price+'</span></div></div></div>';
        				      html += '<form name="choice" action="<%=request.getContextPath()%>/showcart" method="post"><input type="hidden" value=<%=bookId%> name="BookId" ><div class="productNumber"><span>数量</span><span><span class="productNumberSettingSpan"><input type="text" value="1" class="productNumberSetting" name="Add"></span>件</span><span>库存'+arr[0].inventory+'件</span></div>'
        				    	       +'<div class="buyDiv"><a class="addCartLink" ><button type="submit" class="addCartButton" value="加入购物车"><span class="glyphicon glyphicon-shopping-cart"></span>加入购物车</button></a></div></form>';
        				      document.getElementById("c").innerHTML=html;
        			    }
        		     }
        	 }
        	 xmlhttp.open("get","<%=request.getContextPath()%>/bookdetails?bookId="+<%=bookId%>);
        	 xmlhttp.send(null); 
         }
</script>
<script type="text/javascript">
    function searchfunc(key){
    	var keyword=$("#keyword").val();
    	if(keyword.length==0){
    		keyword=key;
    	}
    	window.location.href='<%=request.getContextPath()%>/index/search.jsp?keyword='+keyword; 
    }
</script>
<body>
	<nav class="top">
			<a href="index.jsp" onclick=back()>首页</a>

			<span>欢迎来到鹿马书城~</span>
			
			<%
			if(request.getSession().getAttribute("identity")!=null){
				int identity=(int)request.getSession().getAttribute("identity");
				if(identity==1){
					%>
					<a href="<%=request.getContextPath()%>/exit">退出登录</a>
					<span class="pull-right">
		            <a href="<%=request.getContextPath() %>/ShowOrder">查看订单</a>
					</span><%
				}
				else{%>
					<a href="<%=request.getContextPath()%>/exit">退出登录</a>
					<span class="pull-right">
		            <a href="<%=request.getContextPath() %>/index/orderlist.jsp">我的订单</a>
		            <a href="<%=request.getContextPath() %>/showcart">购物车</a>
					</span><%
				}
			}
			else{
			%>
				<a href="<%=request.getContextPath()%>/enter">请登录</a>
				<a href="<%=request.getContextPath()%>/register">免费注册</a><%
			}
			%>
			

		</nav>


	<div class="searchDiv">
		<input type="text" placeholder="python 机器学习" name="keyword">
		<button id="btn" type="submit" onclick="searchfunc()">搜索</button>
		<div class="searchBelow">
			<a>热搜:</a>
			<span> <a href="<%=request.getContextPath()%>/index/search.jsp?keyword=流浪地球"> 流浪地球 </a> <span></span>
			</span> <span> <a href="<%=request.getContextPath()%>/index/search.jsp?keyword=易经"> 易经 </a> <span></span>
			</span> <span> <a href="<%=request.getContextPath()%>/index/search.jsp?keyword=摆渡人3"> 摆渡人3</a> <span>
            </div>
       </div>
       <div class="imgAndInfo">
    
    <div id="c"></div>
    <div class="container">
			<form action="<%=request.getContextPath()%>/addrating">
    			<input name="score" value="4" type="number" class="rating" min=0 max=10 step=1 data-size="lg">
    			<input name="bookid" value=<%=bookId %> type="hidden" >   
    			<button type="submit" class="btn btn-primary" >Submit</button>
			</form>
		</div>
	<div style="clear:both"></div>
	</div>
</body>